import React, {PureComponent} from "react";
import echarts from "echarts";
import moment from "moment";

class EchartItemComponent extends PureComponent {

    constructor(props) {
        super(props);

        this.chartDiv = null;

    }

    componentDidMount() {

        let newDataArray = [];

        console.log("item");
        console.log(this.props.chartData);

        const xData = this.props.chartData.xData;
        const yData = this.props.chartData.yData;


        const beginTime = moment(xData[0], "YYYY-MM-DD hh:mm:ss");
        const endTime =moment(xData[xData.length-1], "YYYY-MM-DD hh:mm:ss");
        const durationTime = (endTime.diff(beginTime))/4;

        xData.map((item, index) => {
            const newItemArray = Array(2);
            newItemArray[0] = item;
            newItemArray[1] = yData[index];

            newDataArray.push(newItemArray);
        });


        const titleEntity = {
            textStyle: {
                fontSize: 12
            },
            text: this.props.chartData.title
        };

        const minTime = xData[0];
        const maxTime = xData[xData.length - 1];

        const xAxisSetting = {
            type: "time",
            min: minTime,
            max: maxTime,
            interval: durationTime,
            splitLine: {
                show: false      //去除背景网格线
            },
            boundaryGap: false,   //x轴文字对其
            axisTick: {            //展示 小竖线
                show: false
            },
        };

        const yAxisSetting = {
            type: "value",
            show: true,
            splitLine: {
                show: false
            },
            axisLine: {              //显示y轴线
                show: false
            },
            axisTick: {
                show: false
            },
        };

        const seriesSetting = {
            type: "line",
            data: newDataArray,
            symbol: "none",
            smooth: true,
        };

        const gridSetting = {
            top: '20%',
            left: '5%',
            bottom: '10%',
            containLabel: true
        };

        const tooltipSetting = {
            trigger: 'axis',
            formatter: function (params) {
                const dataArray = params[0].data;
                return `<div>时间:${dataArray[0]} <br> 数值:${dataArray[1]}</div>`;
            },
        };


        const voltageOption = {
            title: titleEntity,
            xAxis: xAxisSetting,
            yAxis: yAxisSetting,
            series: seriesSetting,
            grid: gridSetting,
            tooltip: tooltipSetting
        };

        const init = echarts.init(this.chartDiv);
        init.setOption(voltageOption);
    }


    render() {

        return (
            <div ref={element => this.chartDiv = element} style={chartsItemStyle}/>
        )
    }
}

export default EchartItemComponent;


const chartsItemStyle = {
    width: "48%",
    height: 170,
    marginTop: 14,
    border: "1px solid red",
};